<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h2,
        p {
            text-align: center;
        }

        .student {
            overflow: hidden;
            margin: 0 auto;
            /* 合并相邻边框 */
            border-collapse: collapse;
            text-align: center;
            border-radius: 10px 10px 0 0;

        }

        .student tr {
            cursor: pointer;
        }

        .student th {
            padding: 5px 50px;
            color: #fff;
        }

        .student,
        th,
        td {
            border: 1px solid #fff;
            line-height: 45px;
        }

        /* 给行添加渐变背景颜色 */
        .student thead tr {
            background-image: linear-gradient(to right, #f46e33, #f057a5);
        }

        /* 从第2行开始修改背景颜色 */
        .student tbody tr {
            background-image: linear-gradient(to right, #fdf0eb, #fdeff6);
        }

        /* 从第2行开始 最后一个单元格颜色变化 */
        .student tbody tr :last-child {
            color: #f282bb;
        }

        /* 第一行鼠标经过不要变颜色 */
        .student tbody tr:hover {
            background-image: linear-gradient(to right, #f9e3da, #f9d6e8);

        }
    </style>
</head>
<body>
    
    <script>
        // 销售人员数据
        let sales = [
          { name: '小明', age: 18, gender: '男', money: 30, status: 0 },
          { name: '小红', age: 26, gender: '女', money: 99, status: 3 },
          { name: '小刚', age: 19, gender: '男', money: 88, status: 2 },
          { name: '小丽', age: 20, gender: '女', money: 67, status: 1 },
          { name: '晓强', age: 23, gender: '女', money: 77, status: 1 },
          { name: '小张', age: 25, gender: '女', money: 80, status: 2 },
        ]
        // 字段 money 是销售金额
        // 字段 status 是销售状态 0:代表 未及格 1: 代表 及格 2: 代表 良好 3: 代表 优秀
        // 要求1: 数据要排序，从大到小显示
        // 要求2: 销售金额 显示 需要带单位w
        // 要求3: 销售状态 需要 显示出 未及格， 及格， 良好， 优秀 
        // 要求4: 渲染页面的过程 要封装成函数

        
        // 排序
        sales.sort(function(a , b) {
            return b.money - a.money 
        })


        // 1.封装函数
        let getSales = function (arr) {
            // 3.准备模板字符串,将结构的头部先复制过来
            let html = `
                <h2>销售人员数据</h2>
                <table class="student">
                    <thead>
                        <tr>
                            <th>名次</th>
                            <th>姓名</th>
                            <th>年龄</th>
                            <th>性别</th>
                            <th>销售额</th>
                            <th>业绩状态</th>
                        </tr>
                    </thead>
                    <tbody> `
                // 4.数据由实参传递给形参，函数已经接收到了数据，开始循环遍历数据
                for(let i = 0; i < arr.length; i++) {
                     // 5.循环输出真实数据的结构
                     // 拼接html
                    html += `
                    <tr>
                        <td>${i + 1}</td>
                        <td>${sales[i].name}</td>
                        <td>${sales[i].age}</td>
                        <td>${sales[i].gender}</td>
                        <td>${sales[i].money +'w'}</td>
                        <td>${sales[i].status === 0 ? '未及格' : 
                            sales[i].status === 1 ? '及格' :
                            sales[i].status === 2 ? '良好' : '优秀' }</td>
                    </tr>`
                }
             //6.拼接模版的底部
            html += `</table>
            </tbody>`
            //7.输出到body
            document.write(html)

            
        }
        // 3.调用函数渲染
        getSales(sales)
       
        


    </script>
</body>
</html>